<template>
  <!-- 编辑弹出层 -->
  <div>
    <!-- 标题，
      是否显示弹出层，
      不允许modal
      和esc打开，
      关闭按钮，
      关闭按钮的回调，
      宽，
      关闭销毁 -->
    <el-dialog
      :title="Modify"
      :visible.sync="isDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="true"
      :before-close="handleDialogClose"
      width="70%"
      destroy-on-close
    >
      <div>
        <!-- 销毁，校验规则，绑数据，双向绑定数据，样式修改，标签文本宽 -->
        <el-form
          v-if="ShuDown"
          :rules="rules"
          ref="ruleForm"
          :model="ruleForm"
          class="demo-ruleForm"
          label-width="120px"
        >
          <!-- 标签文本，样式，表单域绑定字段 -->
          <el-form-item label="数据源名称" class="item" prop="dataSourceName">
            <!-- 双向绑定，提示信息，控制组件尺寸，样式，清空 -->
            <el-input
              v-model="ruleForm.dataSourceName"
              placeholder="请输入数据源名称"
              size="small"
              class="Popup_inputwidth"
              clearable
              ref="inputone"
              @keyup.native.enter="focusNext('mobile')"
            />
          </el-form-item>

          <el-form-item label="数据源地址" class="item" prop="dataSourceUrl">
            <el-input
              v-model="ruleForm.dataSourceUrl"
              placeholder="请输入数据源地址"
              size="small"
              class="Popup_inputwidth"
              clearable
              ref="mobile"
              @keyup.native.enter="focusNext('mobile1')"
            />
          </el-form-item>

          <el-form-item label="数据库名称" class="item" prop="dbName">
            <el-input
              v-model="ruleForm.dbName"
              placeholder="请输入数据库名称"
              size="small"
              class="Popup_inputwidth"
              clearable
              ref="mobile1"
              @keyup.native.enter="focusNext('mobile2')"
            />
          </el-form-item>

          <el-form-item label="用户名" class="item" prop="dataSourceUserName">
            <el-input
              v-model="ruleForm.dataSourceUserName"
              placeholder="请输入用户名"
              size="small"
              class="Popup_inputwidth"
              clearable
              ref="mobile2"
              @keyup.native.enter="focusNext('mobile3')"
            />
          </el-form-item>

          <el-form-item label="密码" class="item" prop="dataSourcePwd">
            <el-input
              type="password"
              v-model="ruleForm.dataSourcePwd"
              placeholder="请输入密码"
              size="small"
              class="Popup_inputwidth"
              clearable
              :disabled="isEditTable"
              ref="mobile3"
              @keyup.native.enter="focusNext('mobile4')"
            />
          </el-form-item>

          <el-form-item label="数据源描述" class="item">
            <el-input
              v-model="ruleForm.dataSourceDesc"
              type="textarea"
              placeholder="请输入描述"
              size="small"
              class="Popup_inputwidth"
              clearable
              ref="mobile4"
            />
          </el-form-item>

          <el-form-item label="数据源类型" class="item" prop="dataSourceType">
            <!-- 发生改变时触发，双向绑定，提示信息，禁止修改，样式 -->
            <el-select
              @change="changeitem"
              v-model="ruleForm.dataSourceType"
              placeholder=""
              :disabled="isEditTable"
              class="Popup_inputwidth"
            >
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.dataSourceType"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetField('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  //   DropDownList,
  //   PagingQuer,
  IndexNew,
  SourceUpdate,
  //   isLogin,
} from "@/assets/js/api";
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => {},
    },
    isDialog: {
      type: Boolean,
      default: false,
    },
    isEditTable: {
      type: Boolean,
      default: false,
    },
    Modify: {
      type: String,
      default: "",
    },
    tableData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      add: 0,
      // 校验规则
      rules: {
        dataSourceName: [
          { required: true, message: "请输入数据源名称", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourceUrl: [
          { required: true, message: "请输入数据源地址", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dbName: [
          { required: true, message: "请输入数据库名称", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourceUserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourcePwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourceType: [
          { required: true, message: "请选择数据源类型", trigger: "change" },
        ],
      },
      // 添加和编辑
      //   Modify: "",
      // 弹出层
      //   isDialog: false,
      // v-if
      dialogVisible: false,
      // 是否禁用
      //   isEditTable: false,
      // 添加里的列表
      itemtableData: [],
    };
  },
  watch:{
    isDialog:{
      handler() {
        if (this.isDialog && !this.isEditTable) {
          this.$nextTick(()=>{
            this.$refs.inputone.focus()
          })
        }
      },
      immediate:true
    }
  },
  methods: {
    // 回车换行
    focusNext(add){
      this.$refs[add].focus()
    },
    // 添加下拉选中
    changeitem(value) {
      this.ruleForm.dataSourceType = value; //下拉查询选中赋值
    },
    // 点击x关闭
    handleDialogClose() {
      this.ResetData();
      this.$emit("ChangeState", false);
    },
    // v-if关闭
    ShuDown() {
      this.dialogVisible = false;
    },
    // 清空表单数据
    ResetData() {
      this.$emit("EmptyForm", true);
      // this.ruleForm = {
      //   id: "",
      //   dataSourceName: "",
      //   dataSourceUrl: "",
      //   dbName: "",
      //   dataSourceUserName: "",
      //   dataSourceType: "",
      //   dataSourcePwd: "",
      //   dataSourceDesc: "",
      // };
    },
    // 校验重置
    resetField(formName) {
      this.$refs[formName].resetFields();
      this.ResetData();
      this.$emit("ChangeState", false);
    },
    // 添加确定提交事件
    submitForm(formName) {
      this.ruleForm.dataSourcePwd = this.ruleForm.dataSourcePwd.trim();
      this.ruleForm.dataSourceUserName =
        this.ruleForm.dataSourceUserName.trim();
      this.ruleForm.dataSourceName = this.ruleForm.dataSourceName.trim();
      this.ruleForm.dataSourceUrl = this.ruleForm.dataSourceUrl.trim();
      this.ruleForm.dbName = this.ruleForm.dbName.trim();
      this.ruleForm.dataSourceDesc = this.ruleForm.dataSourceDesc.trim();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isEditTable) {
            let res = await SourceUpdate(this.ruleForm);
            if (res.code == 0) {
              this.$emit("locationReload", true);
              this.$emit("ChangeState", false);
              this.ResetData();
            } else {
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error",
              });
            }
          } else {
            this.add += 1;
            if (this.add == 1) {
              //转化base64密文
              let Base64 = require("js-base64").Base64;
              this.ruleForm.dataSourcePwd = Base64.encode(
                this.ruleForm.dataSourcePwd
              );
              console.log(this.ruleForm.dataSourcePwd);
              let res = await IndexNew(this.ruleForm);
              if (res.code == 0) {
                // this.inquire();
                this.isDialog = false;
                this.add = 0;
              } else {
                //转化base64明文
                let Base64 = require("js-base64").Base64;
                this.ruleForm.dataSourcePwd = Base64.decode(
                  this.ruleForm.dataSourcePwd
                );
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error",
                });
                this.add = 0;
              }
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.Popup_inputwidth {
  width: 80%;
}
</style>